/* ==========================================================================
   GLOBAL ACADEMIC TYPOGRAPHY & LAYOUT (Oxford-Style Theme)
   ========================================================================== */
body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #222;
    max-width: 900px; /* Widened slightly to elegantly support your grid levels */
    margin: 40px auto;
    padding: 0 20px;
    background-color: #fcfcf9;
}

header {
    border-bottom: 2px solid #800000;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
}

h1 {
    font-size: 1.8rem;
    color: #800000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

h2 {
    font-size: 1.2rem;
    font-weight: 400;      /* Lighter weight makes it distinct */
    color: #566573;        /* Muted slate gray */
    margin-top: 0;         /* Flushes up close to the H1 */
    margin-bottom: 20px;
}

h3 {
    font-size: 1rem;
    font-weight: 600;      /* Slightly bold for clear structure */
    color: #34495e;        /* Dark slate charcoal */
    text-transform: capitalize;
    margin-top: 15px;
    margin-bottom: 5px;
}

.subtitle {
    font-style: italic;
    color: #555;
    font-size: 1.1rem;
    margin-top: 0;
}

.meta-box {
    background-color: #f3f0e8;
    padding: 15px;
    border-left: 4px solid #800000;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

p {
    text-align: justify;
    margin-bottom: 1.2rem;
}

.appendix, section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

h2 {
    font-size: 1.3rem;
    color: #333;
    margin-top: 30px;
}

.h2c { 
    margin-left: 10px; 
    margin-right: 10px; 
 /*   text-transform: lowercase; */
}

ol, ul {
    font-size: 1.1rem;
    color: #444;
    padding-left: 20px;
    line-height: 1.5;
}

li {
    margin-bottom: 10px;
}

footer {
    margin-top: 50px;
    text-align: center;
    font-size: 0.85rem;
    color: #777;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

a {
    color: #800000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   CONCORDANCE CORE NAVIGATION & LAYOUT
   ========================================================================== */
.nav { 
    margin: 10px 10px 20px 10px; 
    padding: 8px 15px;
    background-color: #f3f0e8; /* Soft Oxford cream background */
    border-left: 4px solid #800000; /* Deep red accent marker */
    display: inline-block;
    font-weight: bold;
}
/* Converts your .nav class into an elegant floating sidebar button */
.nav { 
    display: block;             /* Forces the nav bar to be its own strict horizontal block */
    clear: both;                /* Prevents any floating text or grids from bleeding upward */
    margin: 10px 10px 25px 10px; /* Generous 25px bottom cushion so nothing can crawl underneath */
    padding: 12px 20px;
    background-color: #f3f0e8;   /* Soft Oxford cream container background */
    border-left: 5px solid #800000; /* Deep red accent marker */
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}.nav a {
    color: #800000;
    text-decoration: none;
}
.nav a:hover {
    text-transform: none;
    text-decoration: underline;
}

.index_td { 
    vertical-align: top; /* Fixed typo from vertical-aligh */
    text-align: right; 
}

.level2 {  
    display: grid; 
    padding: 8px; 
    width: 98%;
    grid-template-columns: 20% 20% 15% 20% 25%;
    grid-gap: 4px; 
}

/* ==========================================================================
   CONCORDANCE TABLES (A & B Engine Matrices)
   ========================================================================== */
.atable { 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 95%;  
    border: 1px solid lightgrey; 
    border-style: none none none none; 
}

.btable { 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 95%;  
    border: 1px solid black; 
    border-style: none none none none; 
}

/* Header Cells (Deep Red Tones instead of plain grey) */
.tdch1, .tdch2, .tdch3, .tdch4, .tdch5, .tdch6, .tdch7, .tdch8, .tdch9 {
    vertical-align: top; 
    font-weight: bold;
    background-color: #f3f0e8; /* Soft cream instead of aggressive #f1f1f1 */
    color: #800000; /* Distinct academic burgundy text */
    padding: 6px;
}

.tdch1 { text-align: left; width: 12%; }
.tdch2 { text-align: left; width: 22%; }
.tdch3 { text-align: right; width: 20%; }
.tdch4 { text-align: left; }
.tdch5 { text-align: right; }
.tdch6 { text-align: left; }
.tdch7 { text-align: left; }
.tdch8 { text-align: left; }
.tdch9 { text-align: center; }

/* Data Line Cells */
.tdcl1, .tdcl2, .tdcl3, .tdcl4, .tdcl5, .tdcl6, .tdcl7, .tdcl8, .tdcl9, .tdcl11, .tdcl12, .tdcl13 {
    vertical-align: top;
    padding: 6px;
}

.tdcl1  { text-align: left; width: 12%; border: 1px solid lightgrey; border-style: solid none none none; }
.tdcl2  { text-align: left; width: 22%; border: 1px solid lightgrey; border-style: solid none none none; }
.tdcl3  { text-align: right; width: 20%; border: 1px solid lightgrey; border-style: solid none none none; }
.tdcl4  { text-align: left; width: 33%; padding-left: 12px; border: 1px solid lightgrey; border-style: solid none none none; }
.tdcl5  { text-align: right; width: 13%; border: 1px solid lightgrey; border-style: solid none none none; }
.tdcl6  { text-align: right; }
.tdcl7  { text-align: left; padding-left: 6px; }
.tdcl8  { text-align: left; }
.tdcl9  { text-align: left; grid-column: 4 / span 2; }
.tdcl11 { text-align: left; width: 12%; border: 2px solid lightgrey; border-style: solid none none none; }
.tdcl12 { text-align: left; width: 20%; border: 2px solid lightgrey; border-style: solid none none none; }
.tdcl13 { text-align: right; width: 20%; border: 2px solid lightgrey; border-style: solid none none none; }
/* When a user jumps back to a specific letter anchor, highlight that cell! */
td:target {
    background-color: #ffe6e6 !important; /* Soft red alert tone */
    border: 2px solid #800000 !important; /* Sharp burgundy outline */
    transition: background-color 1s ease;
}

/* Add these matching styles to your stylesheet */
.gem-low      { background-color: #fef9e7 !important; color: #b7950b !important; }
.gem-mid-low  { background-color: #fdf2e9 !important; color: #d35400 !important; }
.gem-mid      { background-color: #f4f6f6 !important; color: #7f8c8d !important; }
.gem-mid-high { background-color: #eaf2f8 !important; color: #2980b9 !important; }
.gem-high     { background-color: #f5eef8 !important; color: #8e44ad !important; }

/* ==========================================================================
   INDEX PAGES OVERRIDES 
   Safely redistributes spacing for the 4 remaining columns (skipping column 4)
   ========================================================================== */
.index-table .tdch1, .index-table .tdcl1 { width: 21%; } /* Text Location */
.index-table .tdch2, .index-table .tdcl2 { width: 26%; } /* MuseScore File */
.index-table .tdch3, .index-table .tdcl3 { width: 24%; } /* MusicXML Data Tree */
.index-table .tdch5, .index-table .tdcl5 { width: 29%; } /* Cantillation Contour Map */